<template>
    <div class="common dataAnalysis">
        <innerCommon :location="location">
            <div slot="table">
                <topList
                    :topList="topList"
                    :currentItem="searchInfo.type"
                    @changeTop="changeTop"
                ></topList>
                <div>
                    <div class="title">
                        <span>{{searchInfo.type==1?'培训数据':'考试数据'}}</span>
                        <div>
                            <a-button @click="selectMonth()">本月</a-button>
                            <a-button @click="selectQuarter()" style="margin:0 10px">本季度</a-button>
                            <div>
                                <a-date-picker
                                format="YYYY-MM-DD"
                                placeholder="开始时间"
                                v-model="startValue"
                                :locale="locale"
                                />
                                -
                                <a-date-picker
                                v-model="endValue"
                                :locale="locale"
                                format="YYYY-MM-DD"
                                placeholder="结束时间"
                                />
                            </div>
                        </div>
                    </div>
                    <num :numData="numData"></num>
                </div>
                <div v-if="joinedNum!=0">
                    <div class="title">
                        <span>{{searchInfo.type==1?'培训人员分析':'考试人员分析'}}</span>
                    </div>
                    <div class="filter">
                        <span @click="changeType('age')" :class="{'active':this.type=='age'}">年龄</span>
                        <span @click="changeType('major')" :class="{'active':this.type=='major'}">专业</span>
                        <span @click="changeType('provice')" :class="{'active':this.type=='provice'}">省份</span>
                        <span @click="changeType('title')" :class="{'active':this.type=='title'}">资历</span>
                    </div>
                    <div class="echarts">
                        <div ref="pie" class="pie"></div>
                    </div>
                </div>
                <div v-else>
                    <div class="title">
                        <span>{{searchInfo.type==1?'培训人员分析':'考试人员分析'}}</span>
                    </div>
                    <a-empty description="暂无数据" style="margin-top:30px;"/>
                </div>
            </div>
        </innerCommon>
    </div>
</template>
<script>
import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import time from "@/units/getRangeTime"
import innerCommon from "@/components/common/innerCommon"
import num from "@/components/common/num"
import topList from "@/components/common/topList"
import moment from "moment"
import {
    getAnalysisApi
} from "@/request/api"
export default {
    name:"dataAnalysis",
    components:{innerCommon,topList,num},
    mounted(){
        this.myChart = this.$refs.pie;
        this.init()
    },
    watch: {
        endValue(){
            this.searchInfo.endTime=moment(this.endValue).format(this.format)
            this.init()
        },
        startValue(){
            this.searchInfo.startTime=moment(this.startValue).format(this.format)
            this.init()
        },
    },
    data(){
        return{
            location:[
                {name:'1+X管理',path:''},{name:'数据统计',path:''}
            ],
            topList:[
                {
                    name:"培训统计",
                    id:1
                },{
                    name:'考试统计',
                    id:0
                }
            ],
            numData:[{
                    name:'培训次数',
                    num:0,
                    src:require('../assets/sta1.png')
                },{
                    name:'参与人数',
                    num:0,
                    src:require('../assets/sta2.png')
                },{
                    name:'获得证书人数',
                    num:0,
                    src:require('../assets/sta3.png')
                }
            ],
            searchInfo:{
                startTime:'',
                endTime:'',
                type:1
            },
            format:'YYYY-MM-DD HH:mm:ss',
            type:'age',
            ageData:[],
            locale,
            startValue: null,
            endValue: null,
            joinedNum:null,
            myChart:null,
        }
    },
    methods:{
        drawPie(){
            let myChart=this.$echarts.init(this.myChart)
            let option = {
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        data:this.ageData,
                        itemStyle:{
                        normal:{ 
                            label:{ 
                                show: true, 
                                formatter: '{b} : {c}人' 
                            }, 
                            labelLine :{show:true} 
                        } 
                        }
                    }
                ]
            };
            myChart.setOption(option)
        },
        drawMap(){
            let myChart = this.$echarts.init(this.myChart)    
            window.onresize = myChart.resize;
            myChart.setOption({ // 进行相关配置
                backgroundColor: "#fff",
                tooltip: {}, // 鼠标移到图里面的浮动提示框
                dataRange: {
                    show: false,
                    min: 0,
                    max: 1000,
                    text: ['High', 'Low'],
                    realtime: true,
                    calculable: true,
                    color: ['orangered', 'yellow', 'lightskyblue']
                },
                geo: { // 这个是重点配置区
                    map: 'china', // 表示中国地图
                    roam: true,
                    label: {
                    normal: {
                        show: true, // 是否显示对应地名
                        textStyle: {
                        color: 'rgba(0,0,0,0.4)'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis: {
                        areaColor: null,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series: [{
                type: 'scatter',
                coordinateSystem: 'geo' // 对应上方配置
                },{
                    name: '人数', // 浮动框的标题
                    type: 'map',
                    geoIndex: 0,
                    data: this.ageData,
                }]
            })
        },
        moment,
        init(){
            this.getToken(getAnalysisApi,this.searchInfo,res=>{
                this.$echarts.init(this.myChart).clear();
                this.numData[0].num=res.activityNum
                this.numData[1].num=res.examineeNum
                this.numData[2].num=res.certNum
                this.joinedNum=res.joinNum
                if(this.type=='age'){
                    let ageData=res.ageData
                    this.ageData=[
                        {value: ageData.underThirty, name: '30岁及以下'},
                        {value: ageData.thirtyToFourtyfive, name: '30-45岁'},
                        {value: ageData.fourtyfiveToSixty, name: '45-60岁'},
                        {value: ageData.overSixty, name: '60岁及以上'}
                    ]
                    this.drawPie()
                }else if(this.type=='provice'){
                    let provinceData=res.provinceData
                    this.ageData=provinceData.map(item=>({'value':item.num,'name':item.province}))
                    this.drawMap()
                }else if(this.type=='major'){
                    this.ageData=res.majorData.map(item=>({'value':item.num,'name':item.name}))
                    this.drawPie()
                }else if(this.type=='title'){
                    this.ageData=res.titleData.map(item=>({'value':item.num,'name':item.name}))
                    this.drawPie()
                }
                
            })
        },
        changeTop(data){
            this.searchInfo.type=data
            this.type='age'
            // this.searchInfo.startTime=undefined
            // this.searchInfo.endTime=undefined
            // this.startValue=undefined
            // this.endValue=undefined
            this.init()
        },
        changeType(type){
            this.type=type
            this.init()
        },
        selectMonth(){
            this.searchInfo.startTime=time.ghGetMonthStartDate()
            this.searchInfo.endTime=time.ghGetMonthEndDate()
            this.startValue=moment(time.ghGetMonthStartDate())
            this.endValue=moment(time.ghGetMonthEndDate())
        },
        selectQuarter(){
            this.searchInfo.startTime=time.ghGetQuarterStartDate()
            this.searchInfo.endTime=time.ghGetQuarterEndDate()
            this.startValue=moment(time.ghGetQuarterStartDate())
            this.endValue=moment(time.ghGetQuarterEndDate())
        }
    }
}
</script>
<style lang="stylus">
.dataAnalysis{
    .innerCommon{
        .content{
            position:relative;
        }
    }
    .tableWrapUl{
        position:absolute;
        left:0;
        top:0;
    }
    .title{
        line-height:40px;
        font-weight:bold;
        border-bottom:1px solid #ddd;
        border-left:2px solid #1890ff;
        padding-left:20px;
        display:flex;
        justify-content:space-between;
        div{
            display:flex;
            align-items center
        }
    }
    .filter{
        span{
            display:inline-block;
            border-right:2px solid #ddd;
            width:100px;
            text-align:center;
            margin-top:20px;
            cursor pointer
        }
        span.active{
            color:#1890ff
        }
    }
    .echarts{
        .pie{
            width:100%;
            height:600px;
            margin:0 auto;
        }
    }
}
</style>